<!-- 双栏控件设置面板 -->
<template>
    <el-tabs modelValue="widget" stretch>
        <el-tab-pane :label="`${widget.widgetData.component.title}组件`" name="widget">
            <el-scrollbar>
                <!-- 中隔线设置 -->
                <layout-vessel-cell-width :widget="widget" />

                <!-- 子组件 -->
                <row-sub-components :widget="widget" />

                <!-- 点击事件 -->
                <row-click-event :widget="widget" />

                <!-- 元素可见设置 -->
                <row-element-visible :widget="widget" />
            </el-scrollbar>
        </el-tab-pane>

        <el-tab-pane label="组件样式" name="style">
            <el-scrollbar>
                <el-collapse modelValue="1">
                    <el-collapse-item title="组件设置" name="1">
                        <!-- 位置 -->
                        <row-position :widget="widget" />

                        <!-- 背景 -->
                        <el-divider></el-divider>
                        <row-background :widget="widget" />

                        <!-- 透明 -->
                        <el-divider></el-divider>
                        <row-opacity :widget="widget" />
                    </el-collapse-item>
                </el-collapse>

                <!-- 中隔线样式 -->
                <layout-vessel-cell-style :widget="widget" />
            </el-scrollbar>
        </el-tab-pane>
    </el-tabs>

    <row-collection :widget="widget" />
</template>

<script>
import { defineComponent, toRefs } from 'vue'
import {
    RowSubComponents,
    RowPosition,
    RowClickEvent,
    RowBackground,
    RowOpacity,
    RowElementVisible,
    RowCollection
} from '../../widget-setting-row'
import LayoutVesselCellWidth from './components/layout-vessel-cell-width'
import LayoutVesselCellStyle from './components/layout-vessel-cell-style'
export default defineComponent({
    name: 'LayoutVesselSetting',
    components: {
        RowSubComponents,
        RowPosition,
        RowClickEvent,
        RowBackground,
        RowOpacity,
        RowElementVisible,
        RowCollection,
        LayoutVesselCellWidth,
        LayoutVesselCellStyle
    },
    props: {
        widget: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { widget } = toRefs(props)

        return {
            widget
        }
    }
})
</script>
